<!--
 @Description 带分类的新闻列表(固定数量)
 @author hemengxia
 @date 2022/10/18
-->

<template>
  <div class="v-classify-news-list-fixed" :style="{ 'margin-top': top}">
    <van-tabs ref="mainNewsTabs" v-model="active" swipeable @change="handleChange">
      <van-tab v-for="(item,index) in classList" :key="index" :name="item.id" :title="item.classifyName" />
    </van-tabs>
    <ul>
      <li v-if="isNoData" class="news-nodata">暂无新闻</li>
      <template v-else>
        <li v-for="(item, index) in list" :key="index" class="list-item" @click="toDetail(item)">
          <newsListStyleEight v-if="item.showType=='ZSXS_CWZ'" :item="item" />
          <newsListStyleTwo v-else-if="item.showType=='ZSXS_YWYSYS'" :item="item" />
          <newsListStyleThree v-else-if="item.showType=='ZSXS_YWZTYS'" :item="item" />
          <newsListStyleFour v-else-if="item.showType=='ZSXS_YWZSYS'" :item="item" />
          <newsListStyleFive v-else-if="item.showType=='ZSXS_TWHPDTYS'" :item="item" />
          <newsListStyleSix v-else-if="item.showType=='ZSXS_TWHPBTYS'" :item="item" />
          <newsListStyleSeven v-else-if="item.showType=='ZSXS_TWHPDSYS'" :item="item" :position="index" />
          <newsListStyleOne v-else :item="item" />
        </li>
        <li v-show="list.length" class="list-more">查看更多</li>
      </template>

    </ul>
  </div>
</template>
<script>
import mixins from './../mixins'
import { queryNewsClassify, getNewsList } from '@/components/CustomPage/apps/widget/news/api'
import newsListStyleOne from '@/components/CustomPage/apps/widget/news/newsListStyleOne'
import newsListStyleTwo from '@/components/CustomPage/apps/widget/news/newsListStyleTwo'
import newsListStyleThree from '@/components/CustomPage/apps/widget/news/newsListStyleThree'
import newsListStyleFour from '@/components/CustomPage/apps/widget/news/newsListStyleFour'
import newsListStyleFive from '@/components/CustomPage/apps/widget/news/newsListStyleFive'
import newsListStyleSix from '@/components/CustomPage/apps/widget/news/newsListStyleSix'
import newsListStyleSeven from '@/components/CustomPage/apps/widget/news/newsListStyleSeven'
import newsListStyleEight from '@/components/CustomPage/apps/widget/news/newsListStyleEight'

export default {
  name: 'VClassifyNewsListFixed',
  components: {
    newsListStyleOne,
    newsListStyleTwo,
    newsListStyleThree,
    newsListStyleFour,
    newsListStyleFive,
    newsListStyleSix,
    newsListStyleSeven,
    newsListStyleEight
  },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    varInfo: {
      type: [Object, undefined],
      default: () => {
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      classList: [],
      active: '7253f622-aa87-412e-b2fd-af3af9e974a8',
      newsType: '',
      id: '',
      isNoData: false,
      defaultList: [
        {
          'id': '1',
          'mainTitle': '新闻标题一',
          'publishTime': '2022-06-16'
        },
        {
          'id': '2',
          'mainTitle': '新闻标题二',
          'publishTime': '2022-06-16'
        },
        {
          'id': '3',
          'mainTitle': '新闻标题三',
          'publishTime': '2022-06-16'
        }
      ],
      defaultClassList: [
        {
          'id': '1',
          'classifyName': '分类一'
        },
        {
          'id': '2',
          'classifyName': '分类二'
        }
      ]
    }
  },
  async created() {
    if (this.isInitData) {
      // this.getNewsClassify()
      await this.initData()
    } else {
      this.list = this.defaultList
      this.classList = this.defaultClassList
    }
  },
  methods: {
    async handleChange(e) {
      await this.getDataByCode('newsList')
    },
    setData(data) {
      if (data !== 'error') {
        for (const key in data) {
          if (data[key].code === '200' && data[key].data) {
            if (key === 'classifyList') {
              this.classList = data[key].data || []
            } else if (key === 'newsList') {
              this.list = data[key].data.rows || []
            }
          } else {

          }
        }
      }
    },

    /**
     * 获取新闻分类
     */
    getNewsClassify() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        queryNewsClassify({ classifyType: 'XWFL_XWGL' })
          .then((res) => {
            console.log('---res', res)
            loading.close()
            if (res.data.data.length > 0) {
              this.classList = res.data.data
              this.active = this.classList[0].id
              this.getNewsList()
            }
          })
          .catch((error) => {
            loading.close()
            reject(error)
          })
      })
    },

    /**
     * 获取新闻列表
     */
    getNewsList(param) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        getNewsList({
          page: 1,
          pageSize: 3,
          businessType: 'xw',
          newsType: param && param !== '' ? param : this.active
        })
          .then(({ data }) => {
            console.log(data, 1111)
            loading.close()
            this.list = data.data.rows || []
          })
          .catch((error) => {
            loading.close()
            reject(error)
          })
      })
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';
@import '~@/styles/mixin.scss';

.v-classify-news-list-fixed {

  margin-top: rem(10);

  .van-tab {
    font-size: rem(28);
    font-family: PingFang SC Regular, PingFang SC Regular-Regular;
    font-weight: 400;
    color: #333333;
  }

  .van-tabs__wrap {
    touch-action: manipulation;
  }

  .van-tabs__nav {
    background-color: transparent;
  }

  .van-tabs__line {
    bottom: rem(45);
    width: rem(34);
    @include bg-color($mainColor);
  }

  .van-tab--active {
    @include font-color($mainColor);
    font-weight: 600;
    font-size: rem(30);
  }

  ul {
    background-color: #fff;
    border-radius: rem(16);

    .news-nodata {
      height: rem(200);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: rem(28);
    }

    .list-item {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: rem(30);
      position: relative;

      &::after {
        content: '';
        height: 1px;
        background-color: #f1f1f1;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
      }

      &:last-child::after {
        height: 0;
      }

      .item-left {
        flex: 1;

        .left-title {
          font-size: rem(30);
          font-family: PingFang SC Medium, PingFang SC Medium-Medium;
          font-weight: 600;
          text-align: left;
          color: #333333;
          line-height: rem(44);
          padding: 0 rem(20);
        }

        .left-txt {
          margin-top: rem(30);
          font-size: rem(22);
          font-family: PingFang SC Regular, PingFang SC Regular-Regular;
          font-weight: 400;
          text-align: left;
          color: #999999;

          > span {
            display: inline-block;
            margin-right: rem(20);
            margin-left: rem(20);
          }
        }
      }

      .item-right {
        width: rem(228);
        height: rem(148);
        border-radius: rem(8);

        > img {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: rem(8);
        }
      }
    }

    .list-more {
      height: rem(64);
      line-height: rem(64);
      text-align: center;
      font-size: rem(24);
      color: #999;
    }
  }
}
</style>
